<template>
  <!--标定研究数据-->
  <div class="innerBox">
    <div class="left">
      <a-menu mode="inline" @click="handleClick" :selectedKeys="[state.work]">
        <template v-for="(work, i) in works">
          <a-sub-menu v-if="work.children" :key="i">
            <template #title>{{ work.label }}</template>
            <a-menu-item v-for="child in work.children" :key="child.value">{{
              child.label
            }}</a-menu-item>
          </a-sub-menu>
          <a-menu-item v-else :key="work.value">{{ work.label }}</a-menu-item>
        </template>
      </a-menu>
    </div>
    <div class="right">
      <div class="head">
        <a-breadcrumb>
          <a-breadcrumb-item
            @click="linkTo(0)"
            :class="{ active: state.level === 0 }"
            >一级</a-breadcrumb-item
          >
          <a-breadcrumb-item
            @click="linkTo(1)"
            :class="{ active: state.level === 1 }"
            >二级</a-breadcrumb-item
          >
          <a-breadcrumb-item
            v-if="!['3-0', '3-1'].includes(state.work)"
            @click="linkTo(2)"
            :class="{ active: state.level === 2 }"
            >三级</a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
      <div class="table">
        <FatherPage v-if="state.level === 0" :work="state.work" />
        <ChildPage v-else-if="state.level === 1" :work="state.work" />
        <InfoPage v-else-if="state.level === 2" :work="state.work" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import FatherPage from "../CalibrateReport/father.vue";
import ChildPage from "../CalibrateReport/child.vue";
import InfoPage from "../CalibrateReport/info.vue";
import { works } from "@/utils/workflow";
import _ from "lodash";

const state = reactive({
  work: "0",
  level: 0,
});

const handleClick = ({ key }) => {
  state.work = key;
  state.level = 0;
};

const linkTo = (v) => {
  state.level = v;
};
</script>
<style lang="less" scoped>
.innerBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .left {
    width: 190px;
    height: 100%;
    background-color: black;
  }

  .right {
    width: calc(100% - 190px);
    margin-left: 4px;
    height: 100%;
    background-color: black;

    .head {
      background-color: #1c1c1c;
      padding: 8px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      :deep(.ant-breadcrumb) {
        & > span {
          color: rgba(255, 255, 255, 0.85);
          cursor: pointer;
        }

        .active {
          color: #177ddc;
        }
      }
    }

    .table {
      height: calc(100% - 38px);
      width: 100%;
      padding: 4px;
      overflow-y: auto;
    }
  }
}
</style>
